<template>
  <!-- <span>这是接口测试页面</span>  -->
  <div>
    <div class="">
      <div class="search">
        <div class="demo">
          <span class="usecase">用例</span>
        </div>
        <div class="input">

        </div>
        <!-- <div class="pic">
            <el-image :src="require('../assets/搜索.png')" class="picture"></el-image>
            <el-image :src="require('../assets/刷新.png')" class="picture"></el-image>
          </div>  -->
      </div>
      <div class="table">
        <el-row class="tac">
          <el-col :span="12">
            <el-tree
              class="filter-tree"
              :data="treeData"
              :props="defaultProps"
              default-expand-all
              :filter-node-method="filterNode"
              ref="tree"
            >
            </el-tree>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="">
      <div class="item_title">
        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item label="用例标题：">
            <el-input v-model="form.name" class="input_reader"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="item_path11">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="接口路径：">
            <!-- <el-input v-model="formInline.user"></el-input> -->
            <el-select v-model="formInline.func">
              <el-option label="get" value="get"></el-option>
              <el-option label="post" value="post"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input v-model="formInline.user"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">save</el-button>
            <el-button type="primary" @click="sendmessage">send</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-dialog :visible.sync="getmessage">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="pretty">
            <el-input
              type="textarea"
              v-model="form.desc"
              placeholder="result: [{goodsName: 夜空黑},{goodsName: 青果绿}],code: 200,message: success"
            >
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              @click="submitForm('ruleForm')"
              style="float:right"
              >确定</el-button
            >
          </el-form-item>
        </el-form>
      </el-dialog>

      <div class="item_header11">
        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item label="headers：">
            <el-input v-model="form.head" class="input_reader"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="item_index">
        <el-form
          ref="form"
          :model="sizeForm"
          label-width="100px"
          label-height="200px"
          size="large"
        >
          <el-radio-group v-model="sizeForm.type">
            <el-radio-button
              label="Params"
              name="type"
              class="select"
            ></el-radio-button>
            <el-radio-button
              label="x-www-form-urlencoded"
              name="type"
              class="select"
            ></el-radio-button>
            <el-radio-button
              label="json"
              name="type"
              class="select"
            ></el-radio-button>
          </el-radio-group>
        </el-form>
        <el-input
          type="textarea"
          :autosize="{ minRows: 8, maxRows: 10 }"
          placeholder="请输入内容"
          v-model="textarea"
          class="input_reader1"
        >
        </el-input>
      </div>
    </div>
  </div>
</template>
<script>
import { send } from "q";
import { casesList } from "@/mock/constants";
export default {
  data() {
    return {
      sizeForm: {
        delivery: false,
        type: []
      },
      formInline: {
        func: "",
        user: ""
      },
      form: {
        name: "",
        head: ""
      },
      textarea: "",
      searchKey: "",
      getmessage: false,
      treeData: casesList,
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  },

  methods: {
    onSubmit() {
      alert("保存成功");
    },
    sendmessage() {
      this.getmessage = true;
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    }
  },
  watch: {
    searchKey(val) {
      this.$refs.tree.filter(val);
    }
  },
  mounted() {
  }
};
</script>
<style scoped="scoped">
.right {
  font-size: 20px;
  float: right;
  margin-top: 15px;
  /* width:1500px; */
  height: 100%;
  /* margin-right: 400px; */
}
.left {
  float: left;
}
.form {
  height: 50px;
  line-height: 50px;
}
.form .el-form-item__label {
  font-size: 15px;
}
.select.el-radio-button__label {
  font-size: 20px;
}
.input_reader {
  width: 150%;
}
.input_reader1 {
  width: 180%;
}
.one {
  width: 80%;
}

.demo {
  float: left;
  font-size: 20px;
  margin-left: 20px;
  margin-top: 20px;
}
.input {
  float: left;
  margin-left: 20px;
  margin-top: 20px;
}
.pic {
  float: right;

  margin-top: 25px;
}
.picture {
  width: 25px;
  height: 25px;
  margin-left: 10px;
}
.table {
  margin-left: 30px;
  margin-top: 35px;
}
.leftrow1 {
  height: 80px;
  font-size: 25px;
  line-height: 30px;
}
.item_path11 {
  margin-top: 20px;
  margin-left: 5px;
}
.demo-form-inline {
  margin-left: 14px;
}
.item_index {
  margin-left: 20px;
}
</style>
